import {fileToBlob, blobToFile, UploadFile} from 'filetouri';
import {useState} from 'react';
import {Button, Form, Modal, Row, Space, Tree, Upload} from 'acud';
import {OutlinedUpload} from 'acud-icon';
import {createWord, docxToPdf} from '@/utils/creatFile';

const FormItem = Form.Item;

const uploadProps = {
    accept: '.png,.jpg',
    name: 'file',
    action: '',
    showUploadList: true,
    beforeUpload: () => false,
    maxCount: 1,
};

const UploadItem = () => {
    const [form] = Form.useForm();
    const [fileList, setFileList] = useState<any>([]);
    const [visible, setVisible] = useState(false);
    const [data, setData] = useState<any>({});
    const [wordHtml, setWordHtml] = useState({} as any);

    const handleChange = async (e: {file: any; fileList: any}) => {
        const {file, fileList} = e;
        if (fileList?.length) {
            fileToBlob(file).then((bobl) => {
                setData(bobl);
            });
        } else {
            setFileList([]);
        }
    };

    const handleCreateWord = async () => {
        const blob = await createWord({});
        setWordHtml(blob);
    };

    const handleCreatePdf = async () => {
        if (wordHtml) {
            docxToPdf({file: wordHtml}).then(() => {
                console.log('下载成功');
            });
        }
    };

    const handleUpload = async () => {
        const file = blobToFile!(data, 'map', 'image/png');
        UploadFile!(file, 'map', 'image/png');
    };

    return (
        <>
            <Modal
                visible={visible}
                destroyOnClose
                title="文件上传"
                onCancel={() => setVisible(false)}
                height={300}
                onOk={() => setVisible(false)}
            >
                <Form form={form}>
                    <FormItem name="file" required label="文件上传">
                        <Row
                            style={{width: 360}}
                            className="drag-upload-container"
                        >
                            <Upload
                                {...uploadProps}
                                fileList={fileList}
                                onChange={handleChange}
                            >
                                <div className="drag-content">
                                    <p>
                                        <OutlinedUpload
                                            width={48}
                                            fill={'#D3D3D3'}
                                        />
                                    </p>
                                    <p className="text">
                                        将文件拖到此处，或
                                        <Button
                                            className="custom-button"
                                            type="text"
                                        >
                                            点击上传
                                        </Button>
                                    </p>
                                    <p className="des">帮助文本</p>
                                </div>
                            </Upload>
                        </Row>
                    </FormItem>
                </Form>
                <Tree treeData={[]} />
            </Modal>
            <Space>
                <Button type="primary" onClick={handleUpload}>
                    下载文件
                </Button>
                <Button onClick={() => setVisible(true)}>点击上传</Button>
                <Button type="primary" onClick={handleCreateWord}>
                    生成Word
                </Button>
                <Button type="primary" onClick={handleCreatePdf}>
                    Word转PDF
                </Button>
            </Space>
        </>
    );
};

export default UploadItem;
